<template>
  <div class="storeindex">
    <div class="flex t_l">
      <div class="flex-bet wid">
        <div class="flex-g-1 ba_f pad_20 mar_r10 bor_rad5">
          <div>
            <span class="fon_14 mar_r5">今日订单数</span>
            <span class="fon_20 color_3 wei">{{zhData.totalSum}}</span>
          </div>
          <div class="flex-bet mar_t10 bor_b_f7 pad_b_15">
            <div class="color_9">
              周同比：
              <span class="color-green">0</span>
            </div>
            <div class="color_9">
              日同比：
              <span class="color-hotren">0</span>
            </div>
          </div>
          <div class="fon_14 marb_l15 mar_t20">总订单数 {{zhData.sum}}</div>
        </div>
        <div class="flex-g-1 ba_f pad_20 mar_lr10 bor_rad5">
          <div>
            <span class="fon_14 mar_r5">今日营业额</span>
            <span class="fon_20 color_3 wei">{{zhData.totalMoney}}</span>
          </div>
          <div class="flex-bet mar_t10 bor_b_f7 pad_b_15">
            <div class="color_9">
              周同比：
              <span class="color-green">0</span>
            </div>
            <div class="color_9">
              日同比：
              <span class="color-hotren">0</span>
            </div>
          </div>
          <div class="fon_14 marb_l15 mar_t20">总营业额 {{zhData.money}}</div>
        </div>
        <div class="flex-g-1 ba_f pad_20 mar_lr10 bor_rad5">
          <div>
            <span class="fon_14 mar_r5">付款人数</span>
            <span class="fon_20 color_3 wei">{{zhData.totalPayUser}}</span>
          </div>
          <div class="flex-bet mar_t10 bor_b_f7 pad_b_15">
            <div class="color_9">
              周同比：
              <span class="color-green">0</span>
            </div>
            <div class="color_9">
              日同比：
              <span class="color-hotren">0</span>
            </div>
          </div>
          <div class="fon_14 marb_l15 mar_t20">总付款人数 {{zhData.payUser}}</div>
        </div>
        <div class="flex-g-1 ba_f pad_20 mar_l10 bor_rad5">
          <div>
            <span class="fon_14 mar_r5">浏览量</span>
            <span class="fon_20 color_3 wei">{{zhData.totalVisitCount}}</span>
          </div>
          <div class="flex-bet mar_t10 bor_b_f7 pad_b_15">
            <div class="color_9">
              周同比：
              <span class="color-green">0</span>
            </div>
            <div class="color_9">
              日同比：
              <span class="color-hotren">0</span>
            </div>
          </div>
          <div class="fon_14 marb_l15 mar_t20">总浏览量 {{zhData.visitCount}}</div>
        </div>
      </div>
    </div>
    <div class="mar_t20 flex">
      <div class="wid60 ba_f outmain flex-g-1" style="height: 480px">
        <div class="indextite">
          统计数据
          <span class="yb_margin lh16 fnormal color_9 mar_l10">统计数据</span>
        </div>
        <div id="shujuEch" style="height: 360px;width: 100%"></div>
      </div>
      <div class="wid40 ba_f outmain flex-g-1 mar_l20" style="height: 480px;">
        <div class="indextite">
          订单分析
          <span class="yb_margin lh16 fnormal color_9 mar_l10">订单分析</span>
        </div>
        <div class="ba_f pad_20 bor_rad5">
          <div class="t_l flex-bet lh30">
            <div class="fon_12 color_6">
            </div>
            <div>
              <el-date-picker v-model="riqidata" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy年MM月dd日" class="mar_l10" @change="onChangOption"></el-date-picker>
            </div>
          </div>
          <div class="mar_t20">
            <div class="flex-bet mar_t10">
              <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top mar_r20">
                <div>
                  <p class="title6 fon_14">预计收入</p>
                  <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.yujiSum}}</p>
                  <div class="flex">
                    <p class="fon_12 title6 lh25">昨日全天 {{zhData.yesterSum}}</p>
                  </div>
                </div>
                <div class="toolTip">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content">今日预计收入，是指今天所有已接订单的预计收入金额汇总，当天实际收入金额，以财务对账页内待结算账单为准</div>
                    <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                      <span>
                        <i class="el-icon-question"></i>
                      </span>
                    </button>
                  </el-tooltip>
                </div>
              </div>
              <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top">
                <div>
                  <p class="title6 fon_14">有效订单</p>
                  <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.payCount}}</p>
                  <div class="flex">
                    <p class="fon_12 title6 lh25">昨日全天 {{zhData.yesPayCount}}</p>
                  </div>
                </div>
                <div class="toolTip">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content">统计时间内，未取消且未发生退款的订单量</div>
                    <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                      <span>
                        <i class="el-icon-question"></i>
                      </span>
                    </button>
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div class="flex-bet mar_t20">
              <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top mar_r20">
                <div>
                  <p class="title6 fon_14">付款人数</p>
                  <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.userCount}}</p>
                  <div class="flex">
                    <p class="fon_12 title6 lh25">昨日全天 {{zhData.yesuserCount}}</p>
                  </div>
                </div>
                <div class="toolTip">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content">统计周期内，付款成功的用户数，一人多次结算记为一人</div>
                    <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                      <span>
                        <i class="el-icon-question"></i>
                      </span>
                    </button>
                  </el-tooltip>
                </div>
              </div>
              <div class="bortColor flex-bet flex-g-1 pad_20 flex-y-top">
                <div>
                  <p class="title6 fon_14">浏览量</p>
                  <p class="fon_30 title35 lh16 pad_tb_20">{{zhData.visitCount}}</p>
                  <div class="flex">
                    <p class="fon_12 title6 lh25">昨日全天 {{zhData.yesVisitCount}}</p>
                  </div>
                </div>
                <div class="toolTip">
                  <el-tooltip effect="dark" placement="top">
                    <div slot="content">统计周期内，店铺所有页面被访问的次数，一个人在统计时间内访问多次记为多次</div>
                    <button type="button" class="el-button question-button-tooltip el-tooltip el-button--text fon_12">
                      <span>
                        <i class="el-icon-question"></i>
                      </span>
                    </button>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 flex">
      <div class="wid60 ba_f outmain flex-g-1" style="height: 580px;">
        <div class="indextite mar_b10">
          销量TOP10商品
          <span class="yb_margin lh16 fnormal color_9 mar_l10">销量TOP10商品</span>
        </div>
        <el-table :data="tableData1" stripe class="tablecenter">
          <el-table-column prop="id" label="排名"></el-table-column>
          <el-table-column prop="name" label="商品名称"></el-table-column>
          <el-table-column prop="num" label="商品销量数"></el-table-column>
          <el-table-column prop="money" label="支付金额"></el-table-column>
        </el-table>
      </div>
      <div class="wid40 ba_f outmain mar_l20 flex-g-1" style="height: 580px;">
        <div class="indextite">
          营业额占比
          <span class="yb_margin lh16 fnormal color_9 mar_l10">营业额占比</span>
        </div>
        <div id="shujuEch2" class="mar_t20" style="height: 420px;width:100%;"></div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import { storeIndex } from '@/api/storeshop';
import { changeDate } from '@/utils/index';
import { mapState } from 'vuex';
export default {
  name: 'storeindex',
  created() {
    this.init();
  },
  computed: {
    ...mapState(['storeId'])
  },
  data() {
    return {
      zhData: {
        totalSum: '',
        sum: '',
        totalMoney: '',
        money: '',
        totalPayUser: '',
        payUser: '',
        totalVisitCount: '',
        visitCount: '',
        yujiSum: '',
        yesterSum: '',
        payCount: '',
        yesPayCount: '',
        userCount: '',
        yesuserCount: '',
        yesVisitCount: ''
      },
      echarts1_option: {
        color: ['#4165D7', '#F1F1F9'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['订单数', '营业额']
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#4ECB73',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: ['2020-8-17', '2020-8-16', '2020-8-15', '2020-8-14', '2020-8-13', '2020-8-12', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-11', '2020-8-10']
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '订单数',
            type: 'bar',
            data: [10, 52, 75, 35, 40, 75, 30, 10, 52, 80, 25]
          },
          {
            name: '营业额',
            type: 'bar',
            data: [10, 52, 20, 30, 25, 35, 80, 10, 52, 50, 60]
          }
        ]
        // series: [
        //     {type: 'bar'},
        //     {type: 'bar'},
        // ]
      },
      echarts1_option1: {
        color: ['#FBD437', '#4165D7', '#4EC478', '#FBA33F'],
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['外卖金额', '其他']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['47%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '外卖金额' },
              { value: 310, name: '其他' }
            ]
          }
        ]
      },
      tableData1: [],
      tableData2: [],
      riqidata: [new Date(), new Date()]
    };
  },
  methods: {
    init() {
      this.recordData();
    },
    async recordData() {
      let startTime = '';
      let endTime = '';
      if (this.riqidata) {
        startTime = changeDate(this.riqidata[0]);
        endTime = changeDate(this.riqidata[1]);
      }
      const { data } = await storeIndex({ storeId: this.storeId, startTime, endTime });
      if (data) {
        this.zhData.totalSum = data.totalSum ? data.totalSum : 0;
        this.zhData.sum = data.sum ? data.sum : 0;
        this.zhData.totalMoney = data.totalMoney ? data.totalMoney : 0;
        this.zhData.money = data.money ? data.money : 0;
        this.zhData.totalPayUser = data.totalPayUser ? data.totalPayUser : 0;
        this.zhData.payUser = data.payUser ? data.payUser : 0;
        this.zhData.totalVisitCount = data.totalVisitCount ? data.totalVisitCount : 0;
        this.zhData.visitCount = data.visitCount ? data.visitCount : 0;
        this.zhData.yujiSum = data.yujiSum ? data.yujiSum : 0;
        this.zhData.yesterSum = data.yesterSum ? data.yesterSum : 0;
        this.zhData.payCount = data.payCount ? data.payCount : 0;
        this.zhData.yesPayCount = data.yesPayCount ? data.yesPayCount : 0;
        this.zhData.userCount = data.userCount ? data.userCount : 0;
        this.zhData.yesuserCount = data.yesuserCount ? data.yesuserCount : 0;
        this.zhData.yesVisitCount = data.yesVisitCount ? data.yesVisitCount : 0;
        this.tableData1 = data.goodsData ? data.goodsData : [];
        this.echarts1_option.series[0].data = data.payResult.map((item) => item.money);
        this.echarts1_option.series[1].data = data.moneyResult.map((item) => item.money);
        this.echarts1_option.xAxis.data = data.moneyResult.map((item) => item.hours);
        this.shujuEch();
        let sumMoney = [];
        sumMoney.push(data.sumMoney, data.outMoney);
        this.echarts1_option1.series[0].data = sumMoney;
        this.shujuEch2();
        // this.bus.$emit('loading', false)
      }
    },
    shujuEch() {
      let myChart = echarts.init(document.getElementById('shujuEch'));
      myChart.setOption(this.echarts1_option, true);
    },
    shujuEch2() {
      let myChart = echarts.init(document.getElementById('shujuEch2'));
      myChart.setOption(this.echarts1_option1, true);
    },
    onChangOption() {
      this.init();
    }
  }
};
</script>
